import {storeBindingsBehavior} from "mobx-miniprogram-bindings";
import base from "@src/store/base";

Component({
  options: {
    addGlobalClass: true
  },
  behaviors: [storeBindingsBehavior],
  storeBindings: [{
    store: base,
    fields: ['themeColor', 'themeTitleColor'],
  }],
  properties: {
    tagList: Array
  },
  data: {
    visible: false,
    showMore: false,
    selectList: []
  },
  lifetimes: {
    ready() {
      this.init();
    }
  },
  methods: {
    init() {
      let query = this.createSelectorQuery()
      query.selectAll(".tags-box_l").boundingClientRect();
      query.selectAll(".scroll-content-tags-list").boundingClientRect();
      query.exec((res) => {
        if (res[0] && res.length !== 0 && res[1] && res[1].length !== 0) {
          let boxWidth = res[0][0].width;
          let rect = res[1][0]
          if (rect && rect.width && rect.width > boxWidth) {
            this.setData({showMore: true})
          } else {
            this.setData({showMore: false})
          }
        }
      });
    },
    handleShow() {
      this.setData({visible: true, selectTempList: JSON.parse(JSON.stringify(this.data.selectList))});
    },
    handleConfirm() {
      this.setData({visible: false, selectList: this.data.selectTempList});
      this.triggerEvent('change', this.data.selectTempList)
    },
    handleClose() {
      this.setData({visible: false})
    },
    handleReset() {
      this.setData({selectTempList: []});
      this.triggerEvent('change', [])
    },
    handleStop() {
      return true;
    },
    handleSelect(e) {
      let item = e.currentTarget.dataset.item;
      let selectList = this.data.selectList;
      let index = selectList.indexOf(item.id);
      if (index === -1) {
        selectList.push(item.id)
      } else {
        selectList.splice(index, 1)
      }
      this.setData({selectList});
      this.triggerEvent('change', selectList)
    },

    handleModelSelect(e) {
      let item = e.currentTarget.dataset.item;
      let selectTempList = this.data.selectTempList;
      let index = selectTempList.indexOf(item.id);
      if (index === -1) {
        selectTempList.push(item.id)
      } else {
        selectTempList.splice(index, 1)
      }
      this.setData({selectTempList});
    }
  }
});
